<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <template #extra>
      <!-- 添加年份选择器 -->
      <a-select v-model:value="selectedYear" @change="onYearChange">
        <a-select-option v-for="year in yearOptions" :key="year" :value="year">{{ year }}</a-select-option>
      </a-select>
    </template>
    <p v-if="activeKey === 'tab2'">
      <VisitAnalysisBar ref="registerForm" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
import { ref, nextTick} from 'vue';
import { Card } from 'ant-design-vue';
import VisitAnalysisBar from '../count/VisitAnalysisBar.vue';

const activeKey = ref('tab2');

const tabListTitle = [
  {
    key: 'tab2',
    tab: '各月检测数量',
  },
];

function onTabChange(key) {
  activeKey.value = key;
}


const registerForm = ref();
const selectedYear = ref(new Date().getFullYear());//当前年份

// 年份选项数组
const yearOptions = Array.from({ length: 10 }, (_, index) => new Date().getFullYear() - index);

function onYearChange(year) {
  selectedYear.value = year;
  // 在这里执行根据选中的年份进行数据查询等操作
  console.log("选中的年份", year);
  nextTick(() => {
    registerForm.value.queryYear(year);
  });
}
</script>
